<template>
  <div class="form_query_container">
    <FormBasicComponent
      :inline="true"
      :form-item-props-config="formItemPropsConfig"
      @onSubmit="onSubmit"
    >
    </FormBasicComponent>
  </div>
</template>
<script setup lang="ts">
import FormBasicComponent from "@/components/form/FormBasicComponent.vue";
import { datePickTypes, ElMessage } from "element-plus";
import type { FormItemPropsConfig, SelectListObj } from "types/components/form";
import { reactive, ref } from "vue";
let onSelectList = reactive<Array<SelectListObj>>([]);
onSelectList = [
  {
    label: "男",
    value: 1,
  },
  {
    label: "女",
    value: 0,
  },
];
const formItemPropsConfig = ref<Array<FormItemPropsConfig>>([
  {
    label: "姓名",
    vModel: "name",
  },
  {
    label: "性别",
    vModel: "sex",
    type: "select",
    selectList: onSelectList,
  },
  {
    label: "出生日期",
    vModel: "birthday",
    placeholder: "请选择出生日期",
    type: "date",
    valueFormat: "YYYY-MM-DD HH:mm:ss",
    dateType: datePickTypes[5],
  },
]);

function onSubmit(formInfo: FormItemPropsConfig) {
  console.log(formInfo);
  ElMessage({
    type: "success",
    message: "表单信息提交",
    duration: 1500,
  });
}
</script>
<style lang="scss" scoped>
.form_query_container {
  background-color: #fff;
  padding-top: 18px;
}
</style>
